<template>
    <div class="join-list">
        <h2>加入我们</h2>
        <div class="eng-cont">
            <i>Join</i>
            <i>Us</i>
        </div>
        <h3>热点追踪</h3>
        <div class="bg-cont"></div>
        <div class="job-cont">
            <JobList v-for="item in jobArr" :jobinfo="item"/>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { GetJob } from '../../api/join'
import JobList from './components/job-list.vue'

const jobArr = ref([])
GetJob().then(res => {
    let { lists } = res.data.data
    jobArr.value = lists
})
</script>

<style lang="scss" scoped>
.join-list {
    padding: .2917rem 0 2.5625rem;
    margin: auto;
    width: 6.25rem;
    >h2 {
        font-size: .1667rem;
        font-weight: bold;
        color: #333333;
        line-height: .1823rem;
        text-align: center;
        margin: auto;
        padding-bottom: .0781rem;
    }

    >.eng-cont {
        display: flex;
        justify-content: center;
        margin-bottom: .7292rem;

        >i {
            font-size: .125rem;
            font-weight: 300;
            color: #999999;
        }

        >i:nth-of-type(1) {
            margin-right: .0521rem;
        }
    }

    >h3 {
        font-size: .1458rem;
        font-weight: 400;
        color: #000000;
        margin-bottom: .1042rem;
    }

    >.bg-cont {
        height: .0521rem;
        background: #EEEEEE;
        margin-bottom: .2083rem;
    }

    >.job-cont {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}
</style>